<!--
  表格右键单击单击
  @author 邵鹏坤 2022年9月22日
  1 功能解析：
    1.1 列表展示
      1.1.1 数据源：示例
        tableData：Array<{
          name:'张三'，
          height:180，
          weight:200，
          birth:’2022-9-22 21：02：30，
          ...
        }>
    1.2 ...
  2 数据源：
-->
<template>
  <div class="mouse-dialog-container" v-show="dialogVisible" :style="parseStyle">
    <div class="mouse-dialog-row" v-if="rowData && rowData.title">
      <Button :text="true" icon="icon-152">{{ rowData && mouseMenu ? rowData[mouseMenu?.mouseData] : '' }}</Button>
    </div>
    <div class="hr"></div>
    <div
      class="mouse-dialog-row"
      v-if="mouseMenu && mouseMenu.buttons && mouseMenu.buttons.length > 0"
      v-for="button in mouseMenu.buttons"
      @click.capture="mouseMenuClickCB(button.id)"
    >
      <Button :text="true" :icon="button.icon">{{ button.text }}</Button>
      <div class="hr"></div>
    </div>
  </div>
</template>

<script setup lang="ts">
  import { defineProps, defineExpose, ref, computed, nextTick, defineEmits } from 'vue'
  import Button from '@/views/button/components/button.vue'
  const props = defineProps<{
    width: string
    mouseMenu?: {
      // 需要显示在第一行的字段名
      mouseData: string
      title?: boolean
      buttons: Array<{
        // 按钮标识
        id: string
        // 可选按钮图标
        icon?: string
        // 按钮文字提示
        text: string
      }>
    }
  }>()
  const dialogVisible = ref(false)
  const emit = defineEmits(['mouseMenuClickCB'])
  const rowData = ref<any>()
  const clientX = ref(0)
  const clientY = ref(0)
  const open = (x: number, y: number, row: any) => {
    clientX.value = x
    clientY.value = y
    rowData.value = row
    nextTick(() => {
      dialogVisible.value = true
    })
    window.addEventListener('click', closeDialog)
  }
  const closeDialog = () => {
    dialogVisible.value = false
    window.removeEventListener('click', closeDialog)
  }
  const mouseMenuClickCB = (buttonId: string) => {
    emit('mouseMenuClickCB', buttonId, rowData)
    dialogVisible.value = false
  }
  const parseStyle = computed(() => {
    return {
      left: (clientX.value && clientX.value > 0 ? clientX.value : 0) + 'px',
      top: (clientY.value && clientY.value > 0 ? clientY.value : 0) + 'px',
      width: props.width
    }
  })
  defineExpose({
    open,
    dialogVisible
  })
</script>

<style lang="scss">
  .mouse-dialog-container {
    // width: 200px;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    flex-direction: column;
    background-color: #fff;
    border-radius: 5px;
    box-shadow: 0px 0px 13px 3px #a6a6a6;
    position: fixed;
    z-index: 999;
    .mouse-dialog-row {
      width: 100%;
      display: flex;
      justify-content: left;
      align-items: flex-start;
      flex-direction: column;
      margin: 4px 8px;
      .button-span {
        margin-left: 12px;
      }
      .hr {
        width: 92%;
        border-bottom: #a6a6a6 1px solid;
      }
    }
  }
</style>
